{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
</head>
<body>
    <div id="header">
        <span class="logo">Bookmarks</span>
        {% if request.user.is_authenticated %}
            <ul class="menu">
                <li {% if section == 'dashboard' %} class="selected" {% endif %}>
                    <a href="{% url 'dashboard' %}">My dashboard</a>
                </li>
                <li {% if section == 'images' %} class="selected" {% endif %}>
                    <a href="#">Images</a>
                </li>
                <li {% if section == 'people' %} class="selected" {% endif %}>
                    <a href="#">People</a>
                </li>                                
            </ul>
        {% endif %}

        <span class="user">
            {% if request.user.is_authenticated %}
                Hello {{ request.user.first_name }},
                <a href="{% url 'logout' %}">Logout</a>
            {% else %}
                <a href="{% url 'login' %}">Log-in</a>
            {% endif %}
        </span>
    </div>

    {% if messages %}
        <ul class="messages">
            {% for message in messages %}
                <li class="{{ message.tags }}">
                    {{ message|safe }}
                    <a href="#" class="close">X</a>
                </li>
            {% endfor %}
        </ul>
    {% endif %}


    <div id="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>